
<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>发送消息</span>
                <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <el-form :inline="true">
                <el-form-item>
                    <el-input type="email" placeholder="" v-model="recipient" />
                </el-form-item>
                <el-form-item>
                    <el-input type="text" placeholder="" v-model="subject" />
                </el-form-item>
                <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="30" show-word-limit>
                </el-input>
            </el-form>
            <div style="float: right;padding: 10px 0;">
                <el-button size="mini" @click="sendMessage('Message')">消息</el-button>
                <el-button size="mini" @click="sendMessage('Notification')">通知</el-button>
                <el-button size="mini" @click="sendMessage('MessageBox')">对话框消息</el-button>
                <el-button size="mini" @click="sendMessage('EMail')">邮件</el-button>
                <el-button size="mini" @click="sendMessage('Weixin')">微信</el-button>
            </div>

        </el-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { SaveSent, EmailInfo, SaveDraft } from '@/api/extend/email'
import { SendWeiXinMessage } from "@/api/message/message"

export default {
    created()
    {
        // this.socket = this.$store.getters.socket
        // console.log(this.socket);
    },
    data()
    {
        return {
            recipient: "licassandra@163.com",
            subject: "来自Cassandra的问候",
            textarea: `${Date.now()}:Cassandra向您问好!`
        }
    }, computed: {
        ...mapGetters(['userInfo']),
    },
    methods: {
        sendMessage(type)
        {
            if (!this.textarea)
            {
                return;
            }
            if ("EMail" === type)
            {
                let data = {
                    recipient: this.recipient,
                    subject: this.subject,
                    bodyText: this.textarea,
                    attachment: JSON.stringify([])
                };
                SaveSent(data).then(res =>
                {
                    this.$message({
                        message: res.msg,
                        type: 'success',
                        duration: 1500
                    });
                }).catch((ex) =>
                {
                    this.$message.error("邮件发送错误！");
                    console.error(ex);
                });
            }
            else if ("Weixin" == type)
            {
                let data = {};
                SendWeiXinMessage(data).then(res =>
                {
                    this.$message({
                        message: "微信信息发送成功！",
                        type: 'success',
                        duration: 1500
                    });
                }).catch((ex) =>
                {
                    this.$message.error("微信信息发送错误！");
                    console.error(ex);
                });;
            }
            else
            {
                let socket = this.$store.getters.socket;
                let token = this.$store.getters.token;
                let sendMessage = {
                    method: "SendMessage",
                    toUserId: this.userInfo.userId,
                    messageType: "text",
                    messageContent: `CMD:${type}|${this.textarea}`,
                    token: token,
                }
                socket.send(JSON.stringify(sendMessage));
                this.textarea = `${Date.now()}:Cassandra向您问好!`
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix {
    .left {
        align-items: start;
    }

    .rigth {
        align-items: end;
    }
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
}
</style>


